<html>
    <head>
        <title>Table Free-用户管理</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" media="all" href="common.css"></link>
        <style type="text/css">
            table{border-bottom: 1px solid #DDD; border-right: 1px solid #DDD; margin: auto;}
            table tr{height: 30px;}
            table>thead>tr{background-color: #EEE;}
            table tr:hover{background-color: #EFEFEF;}
            table tr td{
                border: 1px solid #DDD;
                border-bottom: 0px;
                border-right: 0px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="fr-fullscreen">
            <div class="fr-admin-top">
                <span class="fr-col-3 fr-align-center fr-vlign-middle"><img height="80%" src="logo.png"></span>
                <span class="fr-col-9 fr-align-center fr-txt-bold-32 fr-vlign-top headline">TableFree管理系统</span>
                <span class="fr-menu"></span>
            </div>
            <div class="fr-admin-middle">
                <div class="fr-admin-menu">
                    <ul>
                        <li><a href="network.html">网络配置</a></li>
                        <li class="active"><a href="javascript:;">用户管理</a></li>
                        <li><a href="control.html">控制端口设置</a></li>
                        <li><a href="upgrade.html">系统升级</a></li>
                        <li><a href="manual.html">使用说明书</a></li>
                    </ul>
                </div>
                <div class="fr-admin-main">
                    <div class="fr-admin-user-control fr-align-center">
                        <div class="fr-admin-user-list fr-col-10">
                            <div class="fr-admin-user-area fr-position-relative fr-row-40">
                                <span class="fr-position-absolute fr-position-left">用户管理:</span>
                                <span class="fr-position-absolute fr-position-right">
                                    <span id="add_user_btn" class="fr-btn fr-btn-blue"><i class="fa fa-plus"></i>添加用户</span>
                                </span>
                            </div>
                            <table cellpadding="0" cellspacing="0" width="100%" id="user_table">
                                <thead>
                                    <tr>
                                        <td width="20%"><b>帐号</b></td>
                                        <td width="25%"><b>密码</b></td>
                                        <td width="35%"><b>角色</b></td>
                                        <td><b>操作</b></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="fr-clear"></div>
            </div>
            <div class="fr-admin-bottom fr-align-center" id="status_bar">
                <span class="fr-col-3"><i class="fa"></i> <span id="status_ip">IP:</span></span>
                <span class="fr-col-2"><i class="fa"></i> <span id="status_text">Online</span></span></span>
                <span class="fr-col-2"><i class="fa"></i> <span id="status_username"></span></span>
                <span class="fr-col-3"><i class="fa"></i> <span id="status_time"></span></span>
            </div>
        </div>
        <div class="fr-container fr-align-center fr-fullscreen fr-mask" id="mask">
            <div class="fr-table fr-fullscreen">
                <div class="fr-table-cell fr-vlign-middle">
                    <ul class="cur-login-box fr-col-4">
                        <li class="fr-row-40 fr-row-title fr-align-left">管理登录</li>
                        <li class="fr-popup-content">
                            
                        </li>
                        <li class="fr-row-40 fr-align-center">
                            <span class="fr-btn fr-btn-orange">确定</span>
                            <span class="fr-btn fr-btn-red">取消</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fr-hide" id="add-user-html">
            <div class="fr-col-10 fr-row fr-row-40">
                <span class="fr-col-2 fr-align-right">帐号:</span>
                <span class="fr-col-9 fr-align-left"><input type="text" name="account" id="account" value="" placeholder="请输入登录账号"></span>
            </div>
            <div class="fr-col-10 fr-row fr-row-40">
                <span class="fr-col-2 fr-align-right">密码:</span>
                <span class="fr-col-9 fr-align-left"><input type="password" name="passwd" id="passwd" value="" placeholder="请输入登录密码"></span>
            </div>
            <div class="fr-col-10 fr-row fr-row-40">
                <span class="fr-col-2 fr-align-right">角色:</span>
                <span class="fr-col-9 fr-align-left" id="role_radio">
                    <label><input type="radio" name="role" value="1"> 管理员</label>
                    <label><input type="radio" name="role" value="2"> 操作者</label>
                    <label><input type="radio" name="role" value="3"> 监管者</label>
                </span>
            </div>
        </div>
        
        <script type="text/javascript" src="jquery.1.11.3.mini.js"></script>
        <script type="text/javascript" src="common.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //添加用户
                $('#add_user_btn').on('click', function(){
                    request('/roleList.cgi', null, 'get', function(data){
                        var radio_html = '';
                        for(var i in data){
                            radio_html += '<label><input type="radio" value="' + data[i] + '" name="role"/> ' + data[i] + '</label> ';
                        }
                        $('#role_radio').html(radio_html);
                        popup.showContent('添加新用户', $('#add-user-html').html(), function(){
                            var params = {
                                        userName: $.trim($('input[name=account]', this).val()),
                                        passwd: $.trim($('input[name=passwd]', this).val()),
                                        role: $(':radio[name=role]', this).val(),
                                    }
                            request('/addUser.cgi', params, 'post', function(){
                                popup.toast('用户添加成功啦', function(){
                                    init.users();
                                });
                            })
                            return true;
                        })
                    })
                });
                $('#user_table').on('click', '.del_user_btn', function(){
                    var confirm_text = $(this).data('confirm');
                    var userName = $(this).data('user');
                    popup.confirm('删除确认',confirm_text, function(){
                        request('/deleteUser.cgi', {userName: userName}, 'post', function(){
                            popup.toast('删除成功', function(){
                                init.users();
                            })
                        })
                    })
                })
                var init = {
                    users: function(){
                        request('/userList.cgi', null, 'get', function(data){
                            var tbody = $('#user_table').find('tbody');
                            var html = '';
                            for(var i in data){
                                html += "<tr><td>" + data[i].userName + "</td><td>" + data[i].passwd + "</td><td>" + data[i].role + "</td><td><a href=\"javascript:;\" class=\"fr-btn fr-btn-sm fr-btn-red del_user_btn\" data-confirm=\"确定要删除当前用户吗?\" data-user=\"" + data[i].userName + "\"><i class=\"fa fa-trash\"></i>删除</a></td></tr>";
                            }
                            tbody.html(html);
                        })
                    }
                };

                init.users();
            })
        </script>
    </body>
    </html>